<template>
  <div class="ivu-box">
    <Breadcrumb>
      <BreadcrumbItem>系统设置</BreadcrumbItem>
      <BreadcrumbItem>权限管理</BreadcrumbItem>
    </Breadcrumb>
    <Form>
      <FormItem>
        <Button @click="$router.go(-1)" style="margin-right: 10px">返回</Button>
      </FormItem>
    </Form>

    <div class="form_box">
      <!-- 			<h3>{{name}} :</h3>
      <Form>
          <FormItem label="身份名称">
              <Input v-model="addformInline.title" placeholder="请输入身份名称" style="width: 200px" />
          </FormItem>
          <FormItem label="状态">
              <RadioGroup v-model="addformInline.status">
                  <Radio label="1">启用</Radio>
                  <Radio label="2">禁用</Radio>
              </RadioGroup>
          </FormItem>
          <FormItem label="备注">
              <Input type="textarea" :rows="3" v-model="addformInline.remarks" placeholder="请输入备注"
                  style="width: 200px" />
          </FormItem>
      </Form> -->
      <div style="display: flex; align-items: center;">
        <h3 style="margin-right: 20px;">权限设置</h3>
        <Checkbox label="all" @on-change="allchange">全选</Checkbox>
      </div>

      <!-- 									<template v-if="data && data.length>0">
                      <CheckboxGroup v-model="list">
                          <div v-for="(item , index) in data" :key="index" class="outer">
                              <div class="checkboxs">
                                  <Checkbox :label="item.id" border>{{item.title}}</Checkbox>
                              </div>

                              <div v-if="item.child && item.child.length != 0" class="subordinate">
                                  <div v-for="(item , index) in item.child" :key="index">
                                      <Checkbox class="checkbox" :label="item.id" border>{{item.title}}</Checkbox>
                                      <Checkbox v-for="(i , idx) in item.child" :key="idx" :label="i.id" class="check" border>
                                          {{i.title}}
                                      </Checkbox>
                                  </div>
                              </div>

                          </div>
                      </CheckboxGroup>
                  </template> -->

      <div class="outer" v-for="(items,key) in data" :key="key">
        <div class="checkboxs">
          <Checkbox class="outer" style="margin-bottom: 0;margin-top:10px" :indeterminate="items.indeterminate"
                    :value="saveGroupList.indexOf(items.id)!==-1"
                    @on-change="handleCheckAll($event,items,key)">{{ items.title }}
          </Checkbox>
        </div>


        <div class="subordinate">
          <CheckboxGroup v-model="saveGroupList" :value="items.checked"
                         @on-change="checkAllGroupChange($event, key)">
            <div style="display: flex; flex-flow: column; justify-content: flex-start;align-items: flex-start;">
              <Checkbox class="outer checkbox" style="display:inline-block;margin: 5px 0 ;"
                        v-for="(areaItem,index) in items.child" :key="index" :label="areaItem.id">
                {{ areaItem.title }}
              </Checkbox>
            </div>
          </CheckboxGroup>
        </div>


      </div>


      <Button type="success" @click="submit" long>确定</Button>
    </div>


  </div>
</template>

<script>
import autoCheck from "@/components/autoCheck"

export default {
  components: {
    autoCheck
  },
  data() {
    return {
      saveGroupList: [],


      request: {
        role_id: null,
        rule_id: [],
      },
      data: [],
      list: [],
      name: "",
      allid: [],
      addformInline: {},
      allList: [],
    };
  },
  methods: {
    push_unique(id, key) {
      if (this.saveGroupList.indexOf(id) === -1) {
        this.saveGroupList.push(id);
      }

      for (var i = 0; i < this.data[key].child.length; i++) {
        var ele = this.data[key].child[i];

        console.log(ele)

        if (this.saveGroupList.indexOf(ele.id) === -1) {
          this.saveGroupList.push(ele.id);
        }
      }


      console.log(this.saveGroupList);

    },
    push_unique2(key) {


      for (let i = 0; i < this.data.length; i++) {
        let ele = this.data[key];
        if (this.saveGroupList.indexOf(ele.id) !== -1) {
          this.saveGroupList.splice(this.saveGroupList.indexOf(ele.id), 1);
        }
      }


      for (let i = 0; i < this.data[key].child.length; i++) {
        let ele = this.data[key].child[i];
        if (this.saveGroupList.indexOf(ele.id) !== -1) {
          this.saveGroupList.splice(this.saveGroupList.indexOf(ele.id), 1);
        }
      }

      console.log(this.saveGroupList);

    },
    checkAllGroupChange($event, key) {
      console.log($event, key);
      // if ($event) {
      // 	console.log('ss',key.id)
      // 	this.push_unique(key.id)
      // }

    },
    handleCheckAll($event, items, key) {
      console.log($event, items, key)
      if ($event) {
        this.push_unique(this.data[key].id, key)
      } else {
        console.log(key)
        this.push_unique2(key)
      }
    },


    changeFun(e) {
      console.log(e)
      var arr = this.data;
      // var arr2 = [];
      // for(var k =0,le=e.length;k<le;k++){}
      for (var i = 0, len = arr.length; i < len; i++) {

        if (e.indexOf(arr[i].id)) {
          console.log(arr[i])
          this.delSet(arr[i].id);
          if (arr[i].child && arr[i].child.length > 0) {
            for (var k = 0, le = arr[i].child.length; k < le; k++) {
              this.delSet(arr[i].child[k].id);
            }
          }
          break
        } else {
          this.addSet(arr[i].id)
        }
      }


    },
    addSet(id) {
      var arr = this.list;
      for (var i = 0, len = arr.length; i < len; i++) {
        if (arr[i] === id) {
          arr.push(id)
          // break
        }
      }

      console.log(arr)
    },
    delSet(id) {
      var arr = this.list;
      for (var i = 0, len = arr.length; i < len; i++) {
        if (arr[i] === id) {
          arr.splice(i, 1)
          // break
        }
      }

      console.log(arr)
    },


    allchange(e) {
      console.log(e)
      if (e) {
        this.list = this.allList;

      } else {
        this.list = [];
      }
    },
    //获取所有权限
    all() {

      this.axios.post("role/ruleList").then(res => {
        if (res.code === 1) {
          // this.data = res.data.list;
          var arr = res.data;
          // var pidArr = []; //一级路由
          var arrList = [];
          this.data = arr;
          for (var i = 0, len = arr.length; i < len; i++) {
            arrList.push(arr[i].id)
            for (var k = 0, lk = arr[i].child.length; k < lk; k++) {
              arrList.push(arr[i].child[k].id)
            }

          }

          console.log(arrList);
          this.allList = arrList;
        }
      });

    },


    //根据角色获取权限
    getData() {
      // var id = JSON.parse(this.astgo.getItem(this.Pn + "info")).role_id ;
      this.axios.post("role/getRoleRule", this.request).then(res => {
        if (res.code === 1) {

          // var arr = res.data;
          // this.list = res.data;
          this.saveGroupList = res.data;

          console.log(this.list)
        }
      })

    },
    //角色设置权限
    submit() {
      let form = {
        rule_id: this.saveGroupList,
        role_id: this.request.role_id
      };
      console.log(form)

      // return

      this.axios.post("role/setRule", form).then(res => {
        if (res.code === 1) {
          this.$Message.success("提交成功！");
          this.$router.go(-1);
        }
      })
    }
  },
  created() {
    this.request.role_id = this.$route.query.id;
    this.name = this.$route.query.name;
    this.all();
    this.getData();
  }
};
</script>

<style scoped>
h3 {
  line-height: 50px;
}

.subordinate {
  margin: 10px 20px;
}

.checkbox {
  margin: 5px 10px;
  min-width: 200px;
}

.checkboxs {
  border-bottom: 1px solid silver;
  padding-bottom: 10px;
}

.outer {
  margin: 20px 0;
  /* padding: 10px; */
  padding: 4.5px 10px;
  border: 1px solid silver;
  border-radius: 5px;
}
</style>
